
<template>
    <!-- 结算中心/客户支付结算规则 -->
    <div class="customerPaymentRule">
        <div class="top_operation">
            <!-- 顶部四级联动选择器联动组件 -->
            <!-- <TopSelect
                ref="topSelect"
                @headChange="getHeadId"
                :isRegionShow="isRegionShow"
                @regionChange="getRegionId"
                :isCityShow="isCityShow"
                @cityChange="getCityId"
                :isWareShow="isWareShow"
                @wareChange="getWareId"
            ></TopSelect> -->
            <div class="every_operation" v-if="isRegionShow">
                <span><b style="color:red;">*</b> 大区：</span>
                <a-select
                    show-search
                    :filter-option="filterOption"
                    style="width: 195px" 
                    @change="regionChange" 
                    v-model="regionId" 
                    placeholder="请选择大区"
                >
                    <a-select-option :key="index" v-for="(item, index) in regionList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation" v-if="isCityShow">
                <span><b style="color:red;">*</b> 城市：</span>
                <a-select 
                    show-search
                    :filter-option="filterOption"
                    style="width: 195px" 
                    @change="cityChange" 
                    placeholder="请选择城市"
                    v-model="cityId"
                >
                    <a-select-option :key="index" v-for="(item, index) in cityList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation" v-if="isWareShow">
                <span><b style="color:red;">*</b> 仓库：</span>
                <a-select
                    show-search
                    :filter-option="filterOption" 
                    style="width: 195px" 
                    placeholder="请选择仓库"
                    @change="warehouseChange" 
                    v-model="organizeId"
                >
                    <a-select-option :key="index" v-for="(item, index) in warehouseList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation">
                <span>项目名称</span>
                <a-input
                    v-model="projectName"
                    placeholder="请输入项目名称"
                    :maxLength="128"
                    allowClear
                    style="width: 195px" 
                />
            </div>
            <template v-if="toggleSearchStatus">
            <div class="every_operation">
                <span>客户：</span>
                <a-select style="width: 195px"
                    show-search
                    :filter-option="filterOption"
                    @change="customerChange" 
                    v-model="customerCode" 
                    placeholder="请选择客户"
                    allowClear
                >
                    <a-select-option :key="index" v-for="(item, index) in customerList" :value="item.customerCode">
                        {{item.customerName}}
                    </a-select-option>
                    <a-select-option value="b-other">
                        其他
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation">
                <span>货主：</span>
                <a-select style="width: 195px" 
                @change="handleChange" 
                v-model="ownerCode" 
                allowClear placeholder="请选择货主">
                    <a-select-option :key="index" v-for="(item, index) in ownerList" :value="item.ownerCode" >
                            {{item.ownerName}}
                    </a-select-option>
                    <a-select-option value="b-other">
                        其他
                    </a-select-option>
                </a-select>
            </div>
            </template>
            <div class="every_operation">
                <span>快递公司：</span>
                <a-select style="width: 195px" @change="handleChange" v-model="expressCompanyCode" allowClear placeholder="请选择快递公司">
                    <a-select-option :key="index" v-for="(item, index) in expressCompanyList" :value="item.companyCode">
                        {{item.companyCode}}
                    </a-select-option>
                    <a-select-option value="b-other">
                        其他
                    </a-select-option>
                </a-select>
            </div>
             <template v-if="toggleSearchStatus">
             <div class="every_operation">
                <span>计费方式：</span>
                <a-select style="width: 195px" @change="handleChange" v-model="chargeMode" allowClear placeholder="请选择计费方式">
                    <a-select-option value="time">
                        按时间段计费
                    </a-select-option>
                    <a-select-option value="other">
                        其他
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation" style="margin-top:10px;">
                <span>状态：</span>
                <a-select style="width: 195px" @change="handleChange" v-model="ruleStatus" allowClear  placeholder="请选择状态">
                    <a-select-option value="start">
                        启用
                    </a-select-option>
                    <a-select-option value="stop">
                        禁用
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation">
                <span>创建时间：</span>
                <a-range-picker
                    v-model="createTime"
                    :show-time="{ format: 'HH:mm:ss' }"
                    format="YYYY-MM-DD HH:mm:ss"
                    :placeholder="['Start Time', 'End Time']"
                    @change="createChange"
                    @ok="createOk"
                    :value="createTime"
                    style="width:195px;"
                />
            </div>
             <div class="every_operation">
                <span>创建人：</span>
                <a-input placeholder="请输入创建人" v-model="createBy" :maxLength="50" style="width:195px;" allowClear/>
            </div>
            <div class="every_operation">
                <span>修改时间：</span>
                <a-range-picker
                    v-model="updateTime"
                    :show-time="{ format: 'HH:mm:ss' }"
                    format="YYYY-MM-DD HH:mm:ss"
                    :placeholder="['Start Time', 'End Time']"
                    @change="editChange"
                    @ok="editOk"
                    :value="updateTime"
                    style="width:195px;"
                />
            </div>
            <div class="every_operation">
                <span>修改人：</span>
                <a-input placeholder="请输入修改人" v-model="updateBy"  :maxLength="50" style="width:195px;" allowClear/>
            </div>
            <div class="every_operation">
                <span>备注：</span>
                <a-input placeholder="请输入备注" v-model="remark" style="width:195px;" :maxLength="1024" allowClear/>
            </div>
            </template>
            <div class="button_div">
                <a-button type="primary" icon="search" @click="onSearch()">搜索</a-button>
                <a-button type="primary" icon="sync" style="margin-left:20px;" @click="onReset()">重置</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </div>
        </div>

        <div class="add_btn">
            <a-button type="primary" @click="addExpressFeeRules">新增</a-button>
            <a-button style="margin-left:20px;" @click="batchDelete">删除</a-button>
            <a-button style="margin-left:20px;" @click="doEnable">启用</a-button>
            <a-button style="margin-left:20px;" @click="doDisable">禁用</a-button>
            <!-- <a-button style="margin-left:20px;">导入</a-button>
            <a-button style="margin-left:20px;">导出</a-button> -->

            <!-- 新增快递费规则配置 右滑抽屉 -->
            <a-drawer
                :title="drawerTitle"
                switchFullscreen
                :placement="placement"
                :closable="false"
                :visible="visible"
                @close="onClose"
                :width="drawerWidth"
            >
              <div @click="changeDrawer" class="fullScreenDiv">
                <img v-if="drawerWidth == 1000" src="../../../assets/screenMax.png" alt="">
                <img v-else src="../../../assets/screenMini.png" alt="">
              </div>
             <!-- 步骤条 头部-->
             <a-steps :current="stepCurrent"  class="stepCenter">
                 <a-step v-for="item in stepsContent" :key="item.title" :title="item.title" />
             </a-steps>
             <!-- 步骤条 内容-->
             <div class="steps-content" v-show="stepsInfo">
                <a-form-model
                    ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    layout="inline"
                    
                >
                <!-- validateTrigger: ['onChange', 'onBlur'], -->
                    <a-form-model-item ref="projectName" label="项目名称" style="width:44%;margin-left:56px;" prop="projectName" >
                        <a-input placeholder="请输入项目名称" v-model="form.projectName" style="width:322px"  :maxLength="128" :disabled="btnDisabled" >
                        </a-input>
                    </a-form-model-item>
                    <a-form-model-item ref="customerForm" label="客户"  style="margin-left:45px;" prop="customerForm">
                        <a-select 
                            style="width: 322px" 
                            show-search
                            :filter-option="filterOption"
                            @change="formCustomerChange"
                            v-model="form.customerForm"
                            :disabled="btnDisabled"
                            placeholder="请选择客户"
                        >
                            <a-select-option :key="index" v-for="(item, index) in form.customerFormList" :value="item.customerCode">
                                {{item.customerName}}
                            </a-select-option>
                            <a-select-option value="b-other">
                                其他
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item ref="ownerOfCargo" label="货主"  style="width:44%;margin-left:85px;margin-top:10px" prop="ownerOfCargo"  >
                        <a-select 
                            style="width:322px" 
                            allowClear
                            show-search
                            :filter-option="filterOption"
                            @change="handleChange" 
                            v-model="form.ownerOfCargo"
                            :disabled="btnDisabled"
                            placeholder="请选择货主"
                            mode="multiple"
                        >
                            <a-select-option :key="index" v-for="(item, index) in form.ownerFormList" :value="item.ownerCode">
                                {{item.ownerName}}
                            </a-select-option>
                            <a-select-option value="b-other">
                                其他
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item ref="expressCompany" label="快递公司"  style="margin-left:-10px;margin-top:10px" prop="expressCompany"  >
                        <a-select 
                        mode="multiple"
                        placeholder="请选择快递公司" 
                        style="width: 322px"  
                        v-model="form.expressCompany" 
                        allowClear 
                        :disabled="btnDisabled">
                            <a-select-option :key="index" v-for="(item, index) in form.expressCompanyList" :value="item.companyCode">
                                {{item.companyCode}}
                            </a-select-option>
                            <a-select-option value="b-other">
                                其他
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item ref="chargeMode" label="计费方式"  style="width:44%;margin-left:59px;margin-top:10px" prop="chargeMode"  >
                        <a-select placeholder="请选择计费方式" style="width: 322px" @change="chargeModeChange"  v-model="form.chargeMode" allowClear :disabled="btnDisabled">
                            <a-select-option value="time">
                                按时间段计费
                            </a-select-option>
                            <a-select-option value="other">
                                其他
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item 
                        v-if="chargeModeTime" 
                        ref="chargeableTime" 
                        label="时间" 
                        style="margin-left:45px;margin-top:10px"   
                        prop="chargeableTime"
                        :rules="{required:chargeModeTime ? true:false,message:'请选择时间'}"
                        >
                        <a-range-picker
                            v-model="form.chargeableTime"
                            :show-time="{ format: 'HH:mm:ss' }"
                            format="YYYY-MM-DD HH:mm:ss"
                            :placeholder="['Start Time', 'End Time']"
                            @change="chargeableTimeChange"
                            @ok="chargeableTimeOk"
                            style="width:322px"
                        />
                    </a-form-model-item>
                </a-form-model>
                <a-form-model layout="inline" >
                <a-form-model-item label="备注:" style="margin-left:98px;margin-top:15px">
                    <a-textarea v-model="form.remark" placeholder="请输入备注" :rows="3" style="width:774px" :maxLength="1024" :disabled="btnDisabled" />
                </a-form-model-item>
                </a-form-model>
                <!-- <a-form-model style="margin-top: 40px;">
                    <a-form-model-item :wrapper-col="{ offset: 10 }">
                        <a-button type="primary" @click="modifySubmit" :disabled="btnDisabled" v-if="modify" >
                            修改
                        </a-button>
                        <a-button type="primary" @click="addonSubmit" :disabled="btnDisabled" v-else>
                            保存
                        </a-button>
                        <a-button style="margin-left: 10px;" @click="cancelForm">
                            取消
                        </a-button>
                    </a-form-model-item>
                </a-form-model> -->
             </div>
             <div v-show="!stepsInfo">
                 <RulesTable ref="ruleTable" :tableListInfo="tableListInfo" :organizeId="organizeId" :warehouseCode="code"  @drawerWidth="drawerWidthFun"/>
             </div>
             <!-- 步骤条 下一步、提交按钮-->
             <div class="steps-action">
                <a-button :disabled="nextStep" v-if="stepCurrent < stepsContent.length - 1" type="primary" @click="stepsNext">
                    下一步
                </a-button>
               
                <a-button v-if="stepCurrent > 0" style="margin-left: 8px" @click="stepsPrev">
                    上一步
                </a-button>
                <a-button
                    v-if="stepCurrent == stepsContent.length - 1"
                    type="primary"
                    @click="saveRuleFun()"
                >
                保存
                </a-button>
            </div>
            </a-drawer>
        </div>

        <div class="select_number">
            <span class="number_span">已选择<b>{{selectNumber}}</b>项</span>
            <span class="clear_span" @click="clearSelect">清空</span>
        </div>

        <div class="data_source_list">
            <div class="data_source_details">
                <a-table
                    :loading="tableLoading"
                    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" 
                    :columns="columns" 
                    :data-source="tableData"
                    :pagination="false"
                    bordered
                    rowKey="id"
                    >
                    <span slot="projectName" slot-scope="text" href="javascript:;">
                        <a-tooltip placement="topLeft">
                            <template slot="title">
                            <span>{{text}}</span>
                            </template>
                            <!-- 查看效果 -->
                            <!-- @click="doLook(record)"  -->
                            <span style="color:#f8ac59;cursor:pointer;">{{text}}</span>
                        </a-tooltip>
                    </span>
                    <span slot="chargeMode" slot-scope="text,record">
                        <span v-if="record.billWay == 'time'">按时间段计费</span>
                        <span v-else>其他</span>
                    </span>
                    <span slot="ruleStatus" slot-scope="text,record">
                        <span v-if="record.status == 'start'">启用</span>
                        <span v-else>禁用</span>
                    </span>
                    <a slot="action" slot-scope="text, record" href="javascript:;">
                        <span style="margin-right:8px;" @click="editDrawer(record)">修改</span>
                        <span @click="deleteDrawer(record)">删除</span>
                    </a>
                </a-table>

                <!-- 确认删除对话框 -->
                <a-modal v-model="editVisible" title="确认删除" @ok="handleOk">
                    <p style="text-align:center;">确认删除？</p>
                </a-modal>
                
                <!-- 底部分页组件 -->
                <BottomPagination
                    :total="total"
                    @pageChange="pageChange"
                    @sizeChange="sizeChange"
                ></BottomPagination>
            </div>
            
        </div>

         <!-- 批量删除对话框 -->
        <a-modal
            title="批量删除"
            :visible="batchDeleteVisible"
            :confirm-loading="batchDeleteConfirmLoading"
            @ok="batchDeleteHandleOk"
            @cancel="batchDeleteHandleCancel"
        >
            <p style="text-align:center;">确认删除？</p>
        </a-modal>
       
    </div>
</template>

<script>
import moment from 'moment'
import { TreeSelect } from "ant-design-vue";
import TopSelect from '../../meter/TopSelect'
import RulesTable from '../../../components/table/RulesTable'
import BottomPagination from '../../meter/BottomPagination'
import { 
        getHeadquarters, 
        getRegion, 
        getCity, 
        getWarehouse, 
        getLogisticsList, 
        getOwnerName, 
        getCustomerName, 
        getExpressFeeRules,
        postExpressFeeCheck,
        putExpressFeeStatus,
        postAddExpressFee,
        putDeleteExpressFee,
        getExpressFeeDetail ,
    } from '@/api/api'
import es from 'ant-design-vue/es';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            ellipsis: true,
            customRender:(taxe,records,index)=>`${index + 1}`
        },
        {
            title: '项目名称',
            dataIndex: 'projectName',
            key: 'projectName',
            scopedSlots: { 
              customRender: 'projectName' 
            },
            align: 'center',
            ellipsis: true,
        },
        {
            title: '客户',
            dataIndex: 'customerCode',
            key: 'customerCode',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '货主',
            dataIndex: 'ownerCode',
            key: 'ownerCode',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '快递公司',
            dataIndex: 'companyCode',
            key: 'companyCode',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '计费方式',
            dataIndex: 'billWay',
            key: 'billWay',
            scopedSlots: { 
                customRender: 'chargeMode' 
            },
            width:120,
            align: 'center',
            ellipsis: true,
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            scopedSlots: { 
                customRender: 'ruleStatus' 
            },
            align: 'center',
            ellipsis: true,
        },
         {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            ellipsis: true,
        },
         {
            title: '创建人',
            dataIndex: 'createBy',
            key: 'createBy',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '修改时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '修改人',
            dataIndex: 'updateBy',
            key: 'updateBy',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            align: 'center',
            ellipsis: true,
        },
        { 
            title: '操作', 
            dataIndex: '', 
            key: 'x', 
            scopedSlots: { 
                customRender: 'action' 
            },
            align: 'center',
        },
];


export default {
    name: 'customerPaymentRule',
    components: {
        TopSelect,
        BottomPagination,
        RulesTable,
    },
    data () {
        return {
            type: '',
            code: '',
            headquartersId: '', // 总部id
            regionId: undefined, // 大区id
            cityId: undefined, // 城市id
            organizeId: undefined, // 仓库id
            regionList: [],
            cityList: [],
            warehouseList: [],
            regionName: '', // 大区名称
            cityName: '', // 城市名称
            warehouseName: '', // 仓库名称
            isRegionShow: true,
            isCityShow: true,
            isWareShow: true,
            tableData: [],
            columns,
            tableLoading: false,
            selectNumber: 0, // 当前选中数据条数
            selectedRowKeys: [], // 当前选择集合
            pageNo: 1,
            pageSize: 10,
            total: 0,
            editVisible: false,
            // --
            projectName:'',//项目名称
            expressCompanyCode:undefined,//快递公司
            createBy: '', // 创建人
            createTime: [], // 创建时间
            updateBy: '', // 修改人
            updateTime: [], // 修改时间
            createTime_begin: '', // 创建时间开始时间
            createTime_end: '', // 创建时间结束时间
            updateTime_begin: '', // 修改时间开始时间
            updateTime_end: '', // 修改时间结束时间
            chargeableTime_begin: '', // 按时间段计费开始时间
            chargeableTime_end: '', // 按时间段计费结束时间
            dateFormat: 'YYYY-MM-DD HH:mm:ss',
            remark: '',//备注
            ruleStatus: undefined,//状态
            chargeMode: undefined,//计费方式
            customerCode: undefined,//客户
            customerList: [],//客户下拉数据
            ownerCode: undefined,//货主
            ownerList: [],//货主下拉数据
            expressCompanyList: [],//快递公司下拉数据
            toggleSearchStatus:false,
            placement:"right",//抽屉在右边
            visible: false,
            form: {
                projectName:"",
                customerForm:undefined,
                customerFormList: [],
                ownerOfCargo:undefined,
                ownerFormList:[],
                expressCompany:undefined,
                expressCompanyList:[],
                chargeMode:undefined,
                remark:'',
                chargeableTime:[],//计费方式的时间框
            },
            rules: {
                projectName: [
                    { required: true, message: '请输入项目名称', trigger: 'change', },
                ],
                customerForm: [
                    { required: true, message: '请选择客户', trigger: 'change', },
                ],
                ownerOfCargo: [
                    { required: true, message: '请选择货主', trigger: 'change', },
                ],
                expressCompany: [
                    { required: true, message: '请选择快递公司', trigger: 'change', },
                ],
                chargeMode: [
                    { required: true, message: '请选择计费方式', trigger: 'change', },
                ],
            },
            btnDisabled: false,
            modify:false,//修改按钮
            stepCurrent: 0,
            stepsContent: [
                {
                    title: '基本信息',
                },
                {
                    title: '设置规则',
                },
            ],
            stepsInfo:true,
            chargeModeTime:false,//计费方式的时间框
            addMode:true,
            drawerWidth:1000,
            basicInfo:{},
            batchDeleteVisible: false, // 批量删除
            ids: '',
            delectIds: '',
            batchDeleteConfirmLoading:false,
            nextStep:false,//全部填完下一步高亮
            tableListInfo:[],//全部填完下一步高亮
        }
    },
    methods: {
        // 选择器
        handleChange(value) {
            console.log(`selected ${value}`);
        },
        // 搜索
        onSearch() {
            if( (this.regionId == '' || this.regionId == undefined) || (this.cityId == '' || this.cityId == undefined) || (this.organizeId == '' || this.organizeId == undefined) ){
                this.$message.warning('搜索时必须先选择大区、城市和仓库！')
            }else{
                this.pageNo = 1
                this.pageSize = 10
                this.getExpressFeeRules()
            }
            this.selectNumber = 0
            this.selectedRowKeys = []
        },
        // 重置
        onReset() {
            this.pageSize = 10
            this.pageNo = 1
            this.total = 0
            this.selectNumber = 0
            this.selectedRowKeys = []
            this.tableData = []
            this.regionId = undefined
            this.organizeId = undefined
            this.cityId = undefined
            this.remark= ''
            this.customerCode = undefined
            this.customerList = []
            this.ownerCode = undefined
            this.ownerList = []
            this.expressCompanyList = []
            this.createTime= []
            this.updateTime= []
            this.createTime_begin = ''
            this.createTime_end = ''
            this.projectName = ''
            this.chargeMode = undefined
            this.ruleStatus = undefined
            this.expressCompanyCode = undefined
            this.createBy = ''
            this.updateBy = ''
        },
        // 选中
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys
            this.selectNumber = selectedRowKeys.length
            // if(this.selectedRowKeys.length > 0){
                
            // }else{
                
            // }
        },
        // 清空选中
        clearSelect() {
            this.selectNumber = 0
            this.selectedRowKeys = []
            // this.deletdBtnShow = false
        },
        // 获取当前页数、条数
        pageChange(data1, data2) {
            this.pageNo = data1
            this.pageSize = data2
            this.getExpressFeeRules()
            // this.getREList()
        },
        // 获取当前页数、条数
        sizeChange(data1, data2) {
            this.pageNo = data1
            this.pageSize = data2
            this.getExpressFeeRules()
            // this.getREList()
        },
        // 删除单项
        deleteDrawer(record) {
            this.editVisible = true;
            this.delectIds = record.id
        },
        // 确认删除
        handleOk(e) {
            let params = {
                ids:this.delectIds,
            }
            putDeleteExpressFee(params).then((res)=>{
                this.batchDeleteConfirmLoading = false
                if(res.success){
                    this.editVisible = false;
                    this.selectedRowKeys = []
                    this.getExpressFeeRules() //重新查列表
                    this.$message.success('删除成功！')
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        // 创建时间
        createChange(value, dateString) {
            this.createTime = value
            this.createTime_begin = dateString[0]
            this.createTime_end = dateString[1]
        },
        createOk(value) {
            console.log('onOk: ', value); 
        },
        // 修改时间
        editChange(value, dateString) {
            this.updateTime = value
            this.updateTime_begin = dateString[0]
            this.updateTime_end = dateString[1]
        },
        //按时间段计费 时间
        chargeableTimeChange(value, dateString) {
            this.chargeableTime = value
            this.chargeableTime_begin = dateString[0]
            this.chargeableTime_end = dateString[1]
        },
        editOk(value) {
            console.log('onOk: ', value);
        },
        chargeableTimeOk(value) {
            console.log('onOk: ', value);
        },
        // 选择框过滤
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
            // 获取总部
        getHeadquartersList(){
            let params = {}
            getHeadquarters(params).then((res)=>{
                if(res.success){
                    this.headquartersId = res.result.organizeOrgList[0].id
                    this.getRegionList()
                }
            })
        },
        // 获取大区
        getRegionList(){
            let params = {id: this.headquartersId}
            getRegion(params).then((res)=>{
                if(res.success){
                    this.regionList = res.result.organizeOrgList
                    if(this.regionList.length === 1){
                        this.regionId = this.regionList[0].id
                        this.getCityList()
                    }
                }else{
                    this.$message.warning(res.message, 6)
                }
            })
        },
        // 选择大区
        regionChange(value){
            this.regionId = value 
            this.cityId = undefined
            this.organizeId = undefined
            this.cityList = []
            this.warehouseList = []
            this.getCityList()
            this.customerCode = undefined
            this.customerList = []
            this.ownerCode = undefined
            this.ownerList = []
            this.expressCompanyCode = undefined
            this.expressCompanyList = []
        },
        // 获取城市
        getCityList(){
            let params = {
                areaIds: this.regionId
            }
            getCity(params).then((res)=>{
                if(res.success){
                    this.cityList = res.result.organizeOrgList
                    if(this.cityList.length === 1){
                        this.cityId = this.cityList[0].id
                        this.getWarehouseList()
                    }
                }
            })
        },
        // 选择城市
        cityChange(value){
            this.cityId = value
            this.organizeId = undefined
            this.warehouseList = []
            this.getWarehouseList()
            this.customerCode = undefined
            this.customerList = []
            this.ownerCode = undefined
            this.ownerList = []
            this.expressCompanyCode = undefined
            this.expressCompanyList = []
        },
        // 获取仓库
        getWarehouseList(){
            let params = {
                cityIds: this.cityId
            }
            getWarehouse(params).then((res)=>{
                if(res.success){
                    this.warehouseList = res.result.organizeOrgList
                    if(this.warehouseList.length === 1){
                        this.organizeId = this.warehouseList[0].id
                        this.code = this.warehouseList[0].code
                        // this.getCustomerSelect()
                    }
                }
            })
        },
        // 选择仓库
        warehouseChange(value){
            this.organizeId = value
            for(let item of this.warehouseList) {
                if(item.id === this.organizeId) {
                    this.code = item.code
                    this.customerCode = undefined
                    this.customerList = []
                    this.ownerCode = undefined
                    this.ownerList = []
                    this.expressCompanyCode = undefined
                    this.expressCompanyList = []
                    this.getCustomerSelect()
                }
            }
        },
        // 获取客户下拉数据
        getCustomerSelect() {
            let params = {
                whCode: this.code,
            }
            getCustomerName(params).then((res)=>{
                if(res.success){
                    this.customerList = res.result
                    // this.form.customerList =res.result
                }else{
                    this.$message.warning(res.message, 6)
                }
            })
        },
        // 选择客户
        customerChange() {
            this.ownerCode = undefined
            this.ownerList = []
            this.expressCompanyCode = undefined
            this.expressCompanyList = []
            if(this.customerCode && this.code) {
                this.getOwnerName()
                this.getLogisticsList()
            }else{
                this.$message.warning('请先选择大区、城市和仓库！')
            }
        },
        // 获取货主名称列表
        getOwnerName() {
            let params = {
                whCode: this.code,
                customerCode: this.customerCode,
            }
            getOwnerName(params).then((res)=>{
                if(res.success){
                    this.ownerList = res.result
                }else{
                    this.$message.warning(res.message, 6)
                }
            })
        },
        //获取快递公司名称下拉列表
        getLogisticsList(){
                let params = {
                whCode: this.code,
                customerCode: this.customerCode,
            }
            getLogisticsList(params).then((res)=>{
                if(res.success){
                    this.expressCompanyList = res.result.records
                    // this.form.expressCompanyList =res.result.records
                }else{
                    this.$message.warning(res.message, 6)
                }
            })
        },
        handleToggleSearch(){
            this.toggleSearchStatus = !this.toggleSearchStatus;
        },
        // 新增按钮
        addExpressFeeRules(){
            if( this.regionId && this.cityId && this.organizeId ){
                // 新增清空输入框
                this.form.projectName = ''
                this.form.customerForm = undefined,
                this.form.customerFormList = [],
                this.form.ownerOfCargo = undefined,
                this.form.ownerFormList = [],
                this.form.expressCompany = undefined,
                this.form.expressCompanyList = [],
                this.form.chargeMode = undefined,
                this.form.remark = '',
                this.form.chargeableTime = [],//计费方式的时间框
                this.visible = true;
                this.modify =false
                this.drawerTitle = '创建客户支付结算规则'
                this.formGetcustomer()//表单获取客户下拉数据
            }
            else{
                this.$message.warning('新增前请选择大区、城市、仓库！')
            }
        },
        //表单获取客户下拉数据
        formGetcustomer(){
            let params = {
                whCode: this.code,
            }
            getCustomerName(params).then((res)=>{
                if(res.success){
                    // this.customerList = res.result
                    this.form.customerFormList =res.result
                }else{
                    this.$message.warning(res.message, 6)
                }
            })
        },
        // 表单选择客户
        formCustomerChange(){
            this.form.ownerFormList = [] 
            this.form.ownerOfCargo = undefined
            this.form.expressCompanyList = [] 
            this.form.expressCompany = undefined
            let params = {
                whCode: this.code,
                customerCode: this.form.customerForm,
            }
            //获取货主
            getOwnerName(params).then((res)=>{
                if(res.success){
                    this.form.ownerFormList = res.result
                }else{
                    this.$message.warning(res.message, 6)
                }
            })
            //获取快递公司
            this.getFormExpressList()
        },
        //表单获取快递公司名称下拉列表
        getFormExpressList(){
                let params = {
                whCode: this.code,
                customerCode: this.form.customerForm,
            }
            getLogisticsList(params).then((res)=>{
                if(res.success){
                    // this.expressCompanyList = res.result.records
                    this.form.expressCompanyList =res.result.records
                }else{
                    this.$message.warning(res.message, 6)
                }
            })
        },
        // 表单计费方式改变时
        chargeModeChange(value){
                this.form.chargeMode = value
            if(this.form.chargeMode == 'time'){
                this.chargeModeTime = true
            }else{
                this.chargeModeTime = false
            }
        },
        // 修改表单用户
        editDrawer(record){
            this.stepCurrent = 0
            this.stepsInfo = true
            this.visible = true
            this.modify =true
            this.drawerTitle = '修改客户支付结算规则'
            this.formGetcustomer()//表单获取客户下拉数据
            this.getExpressFeeDetail(record)//获取表单数据回显
        },
        getExpressFeeDetail(record){
            let params = {
                id: record.id,
            }
            getExpressFeeDetail(params).then((res)=>{
                if(res.success){
                    // 赋值 - 基本信息
                    this.form.projectName = res.result.projectName  //项目名称
                    this.form.customerForm = res.result.customerCode //客户
                    this.form.chargeMode = res.result.billWay //计费方式
                    this.form.remark = res.result.remark //备注
                    //货主
                    if(res.result.ownerCode.indexOf(',') === -1){
                        this.form.ownerOfCargo = res.result.ownerCode 
                    }else{
                        this.form.ownerOfCargo = res.result.ownerCode.split(',')
                    }
                    //快递公司
                    if(res.result.ownerCode.indexOf(',') === -1){
                        this.form.expressCompany = res.result.companyCode 
                    }else{
                        this.form.expressCompany = res.result.companyCode.split(',')
                    }
                    //计费方式
                    if(res.result.billWay == 'time'){
                        this.chargeModeTime = true
                    }else{
                        this.chargeModeTime = false
                    }
                    //按时间计费
                    if(res.result.billTimeBegin && res.result.billTimeEnd){
                        this.form.chargeableTime = [moment(res.result.billTimeBegin),moment(res.result.billTimeEnd)]
                    }
                    // 赋值 - 快递费规则配置
                    this.tableListInfo = res.result.ruleDetailInfo
                    
                }else{
                    this.$message.warning(res.message, 6)
                }
            })
        },
        onClose() {
            this.visible = false;
        },
        drawerTitle(){

        },
        cancelForm(){
            this.visible = false;
            this.ruleStatus = undefined
        },
        // 下一步
        stepsNext() {
            this.stepCurrent++;
            this.stepsInfo = false;
            let params = {
                status:'start',
                organizeId: this.organizeId,
                whCode: this.code,
                projectName: this.form.projectName,
                customerCode: this.form.customerForm,
                ownerCode:this.form.ownerOfCargo?this.form.ownerOfCargo.join(','):'',
                companyCode:this.form.expressCompany?this.form.expressCompany.join(','):'',
                billTimeBegin: this.chargeableTime_begin,
                billTimeEnd: this.chargeableTime_end,
                billWay: this.form.chargeMode,
                ruleType: 'CUST',
                remark:this.form.remark,
            }
            this.basicInfo = params
            // ------
            // this.$refs.ruleForm.validate(valid => {
            //     if(valid) {
            //         this.nextStep = false
            //         if(this.addMode){ // 新增
            //             if(!this.chargeModeTime){//选择了计费方式是"其他"
            //                 this.chargeableTime_begin = ''
            //                 this.chargeableTime_end = ''
            //             }
            //             let params = {
            //                 status:'start',
            //                 organizeId: this.organizeId,
            //                 whCode: this.code,
            //                 projectName: this.form.projectName,
            //                 customerCode: this.form.customerForm,
            //                 ownerCode:this.form.ownerOfCargo?this.form.ownerOfCargo.join(','):'',
            //                 companyCode:this.form.expressCompany?this.form.expressCompany.join(','):'',
            //                 billTimeBegin: this.chargeableTime_begin,
            //                 billTimeEnd: this.chargeableTime_end,
            //                 billWay: this.form.chargeMode,
            //                 ruleType: 'CUST',
            //                 remark:this.form.remark,
            //             }
            //             postExpressFeeCheck(params).then((res)=>{
            //                 if(res.success){
            //                     this.basicInfo = params
            //                     this.stepCurrent++;
            //                     this.stepsInfo = false;
            //                 }else{
            //                     this.$message.warning(res.message)
            //                 }
            //             })
            //         }else{ // 修改

            //         }
            //     }else{
            //         this.nextStep = true
            //     }
            // })
        },
        // 上一步
        stepsPrev() {
            this.stepCurrent--;
            this.stepsInfo = true;
        },
        //获取客户支付结算规则列表
        getExpressFeeRules(){
            let params = {
                organizeId: this.organizeId,
                projectName: this.projectName,
                customerCode: this.customerCode,
                ownerCode: this.ownerCode,
                companyCode: this.expressCompanyCode,
                chargeMode:this.chargeMode,
                status:this.ruleStatus,
                ruleType:'CUST',
                delFlag:0,
                createBy:this.createBy,
                createTime_begin:this.createTime_begin,
                createTime_end:this.createTime_end,
                updateBy:this.updateBy,
                updateTime_begin:this.updateTime_begin,
                updateTime_end:this.updateTime_end,
                remark:this.remark,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
            }
            this.tableLoading = true
            getExpressFeeRules(params).then((res)=>{
                console.log(res)
                this.tableLoading = false
                if(res.success){
                        this.selectNumber = 0
                        this.selectedRowKeys = []
                        // 序号
                    for(let i=0; i<res.result.records.length; i++){
                        res.result.records[i].serialNumber = i+1
                    }
                        this.tableData = res.result.records
                        this.total = res.result.total
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        // 查看
        doLook(record) {
            this.btnDisabled = true
            this.editDrawer(record)
            console.log('查看',record)
        },
         // 启用
        doEnable() {
            if(this.selectedRowKeys.length <= 0){
                this.$message.warning('请先勾选需要启用的项！')
                return
            }
            // for(let item of this.selectedRowKeys){
            //     for(let bItem of this.tableData){
            //         if(item == bItem.id){
            //             if(bItem.status == 'start'){
            //                 this.$message.warning('当前操作的数据存在已启用的数据！')
            //                 return
            //             }
            //         }
            //     }
            // }

            let flag = 'start'
            this.enableOrDisable(flag)
        },
        // 禁用
        doDisable() {
            if(this.selectedRowKeys.length <= 0){
                this.$message.warning('请先勾选需要禁用的项！')
                return
            }
            // for(let item of this.selectedRowKeys){
            //     for(let bItem of this.tableData){
            //         if(item == bItem.id){
            //             if(bItem.status == 'stop'){
            //                 this.$message.warning('当前操作的数据存在已禁用的数据！')
            //                 return
            //             }
            //         }
            //     }
            // }
            let flag = 'stop'
            this.enableOrDisable(flag)
        },
        // 启用、禁用
        enableOrDisable(flag) {
            this.ids = this.selectedRowKeys.join(',')
            let params = {
                ids: this.ids,
                status: flag,
            }
            putExpressFeeStatus(params).then((res)=>{
                if(res.success){
                    this.getExpressFeeRules() //重新查列表
                    if(flag == 'start'){
                        this.$message.success('启用成功！', 6)
                    }else{
                        this.$message.success('禁用成功！', 6)
                    }
                }else{
                    this.$message.warning(res.message, 6)
                }
            })
        },
        drawerWidthFun(value){
           this.drawerWidth = value
        },
        changeDrawer(){
            if(this.drawerWidth == 1000){
                this.drawerWidth = '100%'
            }else{
                this.drawerWidth = 1000
            }
        },
        // 保存快递规则配置
        saveRuleFun(){
            // 存在未填写完成的地区或规则价格
            let tableList = this.$refs.ruleTable.generateOptions();
            let params = {
                ...this.basicInfo,
                ruleDetailInfo:tableList,
            }
            postAddExpressFee(params).then((res)=>{
                if(res.success){
                  this.visible = false
                  this.$message.success(this.basicInfo.projectName+'结算规则创建成功')
                  this.getExpressFeeRules()
                }else{
                  this.$message.warning(res.message)
                }
            })
            console.log('表格数据',tableList)
            console.log('基本信息数据',this.basicInfo)
            console.log('提交的数据',params)
            // this.$refs.ruleForm.validate(valid => {
            //     if(valid) {
                    
            //     }
            // },)
        },
        // 批量删除
        batchDelete() {
            if(this.selectedRowKeys.length <= 0){
                this.$message.warning('请先勾选需要删除的项！')
                return
            }
            this.batchDeleteVisible = true
            this.delectIds = this.selectedRowKeys.join(',')
        },
        batchDeleteHandleOk(e) {
            this.batchDeleteConfirmLoading = true;
            let params = {
                ids: this.delectIds,
            }
            putDeleteExpressFee(params).then((res)=>{
                this.batchDeleteConfirmLoading = false
                if(res.success){
                    this.batchDeleteVisible = false;
                    this.batchDeleteConfirmLoading = false;
                    this.selectNumber = 0
                    this.selectedRowKeys = []
                    // this.deletdBtnShow = false
                    this.getExpressFeeRules() //重新查列表
                    this.$message.success('删除成功！')
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        batchDeleteHandleCancel(e) {
            this.batchDeleteVisible = false;
        }, 
    },
    created() {
        this.getHeadquartersList()
    },
}
</script>

<style lang="less" scoped>
    .customerPaymentRule {
        width: 100%;
        padding: 0 10px 10px 10px;
        font-style: Microsoft YaHei;
        background: #ffffff;
        box-sizing: border-box;
        .top_operation{
            margin-bottom: 10px;
            overflow: hidden;
            .every_operation{
                float: left;
                margin-top: 10px;
                margin-right: 20px;
                span{
                    display: inline-block;
                    width: 85px;
                }
            }
            .button_div{
                float: left;
                margin-top: 10px;
            }
        }
        .select_number{
            width: 100%;
            height: 36px;
            padding-left: 20px;
            margin-bottom: 10px;
            box-sizing: border-box;
            background: rgba(57, 72, 103, .22);
            line-height: 36px;
            .number_span{
                color: #ffffff;
                margin-right: 30px;
                b{
                    color: #394867;
                    margin: 0 15px;
                }
            }
            .clear_span{
                cursor: pointer;
                color: #394867;
            }
        }
        .add_btn{
            margin-bottom: 10px;
        }
        .data_source_list{
            h3{
                font-weight: bold;
            }
            .data_pagination{
                width: 100%;
                height: 32px;
                margin: 20px 0 10px 0;
            }
        }
    }
    .stepCenter{
        width: 50%;
        margin: 0 auto;
        margin-bottom: 4%;
        margin-top: 2%;
    }
    .steps-action{
        display: flex;
        justify-content:center;
        margin-top: 4%;
        button{
            margin: 0px 10px;
        }
    }
    .fullScreenDiv{
        position: absolute;
        z-index: 99;
        right: 20px;
        top: 14px;
        cursor: pointer;
        img{
            width: 22px;
            height: 22px;
        }
    }
</style>
